<template>
	<view>
		<view class="list">
			<view class="item flex align-center">
				<text>收货人</text>
				<input placeholder="请输入姓名" v-model="andress.name" />
			</view>
			<view class="item flex align-center">
				<text>手机号码</text>
				<input placeholder="请输入手机号" v-model="andress.mobile"/>
			</view>
			
			<!-- <picker  @change="RegionChange" :value="index" :range="region">
				<view class="item flex align-center justify-between">
					<text>省市区</text>
					<view class="flex align-center">
						<text>{{region[index]}}，{{region[index+1]}}，{{region[index+2]}}</text>
						<text style="margin-left: 20upx;" class="lg text-gray cuIcon-right"></text>
					</view>
				</view> 
			</picker> -->
			
			
			<!-- #ifdef MP-ALIPAY -->
			<view class="item flex align-center justify-between" @click="changeregion">
				<text>省市区</text>
				<text class="txt1" style="width:60%;">{{regionName}}</text>
				<text style="margin-left: 20upx;" class="lg text-gray cuIcon-right"></text>
			</view>
			<u-picker mode="region" v-model="addressshow" @confirm="confirmregion"></u-picker>
			<!-- #endif -->
			<!-- #ifdef MP-WEIXIN -->
			<picker mode="region"  @change="RegionChange" :value="index" :range="region">
				<view class="item flex align-center justify-between">
					<text>省市区</text>
					<view class="flex align-center">
						<text>{{region[index]}}，{{region[index+1]}}，{{region[index+2]}}</text>
						<text style="margin-left: 20upx;" class="lg text-gray cuIcon-right"></text>
					</view>
				</view> 
			</picker>
			<!-- #endif -->

			<view class="item flex align-center">
				<text>详细地址</text>
				<input placeholder="请输入详细地址" v-model="andress.address"/>
			</view>
		</view>

		<view class="btn-con flex align-center justify-center">
			<view class="btn" @tap='addAddressEdit(andress)'>保存地址</view>
			<view class="btn" @tap='delAddressEdit(andress)'>删除地址</view>
		</view>
	</view>
</template>

<script>
	var api = require('@/components/api.js');
	export default {
		data() {
			return {
				user:'',
				index: 0,
				region: ['广东省', '广州市', '海珠区'],
				andress:'',
				from:'',
				regionName:"",
				addressshow:false
			}
		},
		onLoad(options) {
			if(options.address){
				this.andress = JSON.parse(options.address)
				if(this.andress.area.indexOf(',')>=0){
					var tempArea =  this.andress.area.split(',');
					if(tempArea.length ==3){
						this.region = tempArea;
					}
				}
				this.regionName = this.andress.area
			}
			if(options.from!=undefined){
				this.from = options.from
			}
			console.log("updataAddress:"+JSON.stringify(this.andress))
			console.log("updataAddress:"+JSON.stringify(this.region))
			this.user = uni.getStorageSync('user')
		},
		methods: {
			confirmregion(e){
				console.log('e',e)
				this.regionName = e.province.label+','+e.city.label+','+e.area.label
				this.andress.area = e.province.label+','+e.city.label+','+e.area.label
				
			},
			changeregion(){
				console.log('打开地区选择');
				this.addressshow=true
			},
			/**
			 * 修改地址
			 * **/
			addAddressEdit:function(item){
				api.post({
					url: 'User/PostAddressEdit?address_id='+item.id+'&is_default='+item.is_default+'&user_id='+this.user.user_id,
					data: {
						name:item.name,
						mobile:item.mobile,
						area:item.area,
						address:item.address,
						
					},
					success: data => {
						console.log(JSON.stringify(data));
						if (data.ErrCode == 0) {
							uni.showToast({
								title:'成功'
							})
							if(this.from == 'buy'){
								console.log('dddd')
								uni.navigateBack({
									delta:1
								})
							}else{
								uni.redirectTo({
									url:'/pages/receivingAddress/receivingAddress'
								})
							}
							
						}
					}
				});
			},
			/**
			 * 删除地址
			 * **/
			delAddressEdit:function(item){
				api.get({
					url: 'User/GetAddressDelete',
					data: {
						address_id:item.id,						
					},
					success: data => {
						console.log(JSON.stringify(data));
						if (data.ErrCode == 0) {
							uni.showToast({
								title:'成功'
							})
							uni.redirectTo({
								url:'/pages/receivingAddress/receivingAddress'
							})
						}
					}
				});
			},
			RegionChange(e) {
				this.region = e.detail.value
				this.andress.area = this.region[0]+','+ this.region[1]+','+ this.region[2]
				console.log(this.region)
				console.log(e.detail.value)
			},
		}
	}
</script>

<style lang="scss" scoped>
	.item1{
		padding: 0 20upx;
		margin-top: 20upx;
	}
	.item>text:nth-child(1){
			font-size: 28upx;
			color: #666666;
			width: 120upx;
	}
	.item>input{
		margin-left: 40upx;
	}
	.item{
		background-color: #fff;
		width: 100%;
		border-bottom: 1upx solid #ddd;
		height: 86upx;
	}
	.list{
		background-color: #fff;
		padding: 0 20upx;
	}
	.btn-con{
		position: fixed;
		bottom: 120rpx;
		width: 100%;
		height: 100upx;
		background-color: #fff;
		border-top: 1upx solid #ddd;
	}
		.btn{
			text-align: center;
			width: 560upx;
			line-height: 70upx;
				height: 70upx;
				background-color: $btn-bground;
				border-radius: 35upx;
				color: #fff;
				font-size: 28upx;
		}
</style>
